<template>
	<view class="user">
		<!-- 个人信息 -->
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="header" @click="userDetail">
			<view
				style="width: 100%;position: absolute;top: 0;left: 0;z-index: 0;width:100%;height: 464rpx;background:linear-gradient(180deg,#d6b16b,#fff);">
			</view>
			<!-- <image src="http://7n.gl.file.91golf.com/c14fb201935649f38638bdc6dd3d76c5.jpg" mode="widthFix" style="width: 100%;position: absolute;top: 0;left: 0;z-index: 0;"></image> -->
			<view class="head-1">
				<image :src="userInfo.face || '/static/missing-face.png'"></image>
			</view>
			<view class="head-2" v-if="userInfo.id" style="z-index: 1;">
				<view class="user-name">{{ userInfo.nickName }}</view>
			</view>
			<view class="head-2" v-else>
				<view class="user-name">登录/注册</view>
			</view>
			<u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
		</view>

		<!-- 积分，优惠券，关注， -->
		<div class="pointBox box">
			<!--      <u-row text-align="center" gutter="16" class="point">
        <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/deposit/operation')">
          <view>预存款</view>
          <view class="money">{{ walletNum | unitPrice}}</view>
        </u-col>

        <u-col text-align="center" span="4" @click="navigateTo('/pages/cart/coupon/myCoupon')">
          <view>优惠券</view>
          <view>{{ couponNum || 0 }}</view>
        </u-col>

        <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/myTracks')">
          <view>足迹</view>
          <view>{{ footNum || 0 }}</view>
        </u-col>
      </u-row> -->
			<!-- 我的订单，代付款 -->
			<view class="order" style="padding-top: 30rpx;">
				<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=0')">
					<div class="bag bag1">
						<u-icon name="order" size="35" color="#fff"></u-icon>
					</div>
					<view>我的订单</view>
				</view>
				<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
					<div class="bag bag2">
						<u-icon name="bag-fill" size="35" color="#fff"></u-icon>
					</div>
					<view>待付款</view>
				</view>
				<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
					<div class="bag bag3">
						<u-icon name="car-fill" size="35" color="#fff"></u-icon>
					</div>
					<view>待收货</view>
				</view>
				<view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
					<div class="bag bag4">
						<u-icon name="star-fill" size="35" color="#fff"></u-icon>
					</div>
					<view>待评价</view>
				</view>
				<view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
					<div class="bag bag5">
						<u-icon name="server-fill" size="35" color="#fff"></u-icon>
					</div>
					<view>售后服务</view>
				</view>
			</view>

		</div>
		<tool />
		<!-- 常用工具 -->
		<!-- <view class="pointBox box" style="width: 100%; height: 400rpx;border-radius:30upx;">
			<view class="order" style=" box-shadow:0 0 6upx #c2bebe;">
				<map @tap="clickNavigator" id="map" :longitude="104.060791" :latitude="30.569241" scale="14" show-location
					:markers="markers" style="width: 100%; height: 400rpx;border-radius:30upx;"></map>
			</view>
		</view> -->
		<!-- 
		<view class="pointBox box inner" style="margin-top: 50rpx;">

			<view style=" box-shadow:0 0 6upx #c2bebe;">
				<map @tap="clickNavigator" id="map" :longitude="longitude" :latitude="latitude" scale="14" show-location
					:markers="markers" style="width: 100%; height: 200px;border-radius:30upx;"></map>
			</view>

		</view> -->
		<view class="contact_box" style="padding: 0 30rpx;">
			<view class="tit">您可以随时联系我们</view>
			<view class="item" v-for="(item,index) in courseList" :key="index" @click="makePhoneCall(item)">
				<view class="itm_l">
					<i class="line"></i>
					<text class="course">{{item.name}}</text>
				</view>
				<view class="itm_r">
					<text class="phone">{{item.phone}}</text>
					<gt-icon code="RIGHT" class="icon right" />
				</view>
			</view>
			<view style=" box-shadow:0 0 6upx #c2bebe;">
				<map @tap="clickNavigator" id="map" :longitude="longitude" :latitude="latitude" scale="14" show-location
					:markers="markers" style="width: 100%; height: 200px;border-radius:30upx;"></map>
			</view>
		</view>


	</view>
</template>
<script>
	import tool from "@/pages/tabbar/user/utils/tool.vue";
	import {
		getCouponsNum,
		getFootprintNum
	} from "@/api/members.js";
	import {
		getUserWallet
	} from "@/api/members";
	export default {
		components: {
			tool,
		},
		data() {
			return {
				courseList: [{
						name: '财税代理（林老师）',
						phone: '18081166144（同微信）'
					},
					{
						name: '财务审计（王老师）',
						phone: '18181982769（同微信）'
					},
					{
						name: '税务咨询（小然老师）',
						phone: '13648004028（同微信）'
					},
					{
						name: '地址',
						phone: '益州大道北段1705号环球中心W3区1708号'
					},
				],
				markers: [{
					iconPath: "/static/location.png",
					id: 0,
					latitude: 30.569241,
					longitude: 104.060791,
					width: 30,
					height: 30
				}],
				coverTransform: "translateY(0px)",
				coverTransition: "0s",
				moving: false,
				userInfo: {},
				couponNum: "",
				footNum: "",
				walletNum: "",
				longitude: "104.060791",
				latitude: "30.569241"
			};
		},
		onLoad() {},
		onShow() {

		},
		onPullDownRefresh() {
			this.getUserOrderNum();
			this.userInfo = this.$options.filters.isLogin();
		},

		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navigateTo("/pages/mine/set/setUp");
			}
		},
		// #endif

		mounted() {
			console.log("mounted")
			this.userInfo = this.$options.filters.isLogin();
			if (this.$options.filters.isLogin("auth")) {
				this.getUserOrderNum();
			} else {
				this.walletNum = 0;
			}
		},
		methods: {
			makePhoneCall(item) {
				wx.setClipboardData({
					data: item.phone,
					success: function(res) {
						wx.getClipboardData({
							success: function(res) {
								wx.showToast({
									title: '已复制'
								});
							}
						});
					}
				});
			},
			clickNavigator: function(e) {

				const key = '3A6BZ-LY56X-DIW4E-TBBVO-YFLB3-7VB7T'; //使用在腾讯位置服务申请的key
				let referer = '小然财税'; //调用插件的app的名称
				let endPoint = JSON.stringify({ //终点
					'name': "益州大道北段1705号环球中心W3区1708号",
					'latitude': this.latitude,
					'longitude': this.longitude
				});
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' +
						endPoint
				});
				// wx.openLocation({
				// 	latitude: Const.Latitude,
				// 	longitude: Const.Longitude,
				// 	scale: 18,
				// 	name: this.reserveInfo.content,
				// 	address: Const.Address
				// });
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navigateTo(url) {
				uni.navigateTo({
					url,
				});
			},
			userDetail() {
				this.userInfo && this.userInfo.id ?
					this.navigateTo("/pages/mine/set/personMsg") :
					this.$options.filters.navigateToLogin();;
			},
			async getUserOrderNum() {
				uni.stopPullDownRefresh();

				Promise.all([
					getCouponsNum(), //优惠券
					getFootprintNum(), //浏览数量
					getUserWallet(), //预存款
				]).then((res) => {
					this.couponNum = res[0].data.result;
					this.footNum = res[1].data.result;
					this.walletNum = res[2].data.result.memberWallet;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	html,
	body {
		overflow: auto;
	}

	.money {
		overflow: hidden;

		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.user {
		.header {
			max-width: 100%;
			padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
			height: calc(var(--status-bar-height) + 360rpx);
			background-size: cover;
			position: relative;
			// background-image: url("@/static/img/bg-answer.png");
			background-position: bottom;
			background-repeat: no-repeat;
			color: #ffffff;
			display: flex;
			justify-content: space-between;

			.head-1 {
				text-align: center;
				width: 152rpx;
				position: relative;
				display: flex;
				align-items: center;

				image {
					width: 152rpx;
					height: 144rpx;
					border-radius: 50%;
					margin-bottom: 30rpx;
					border: 3px solid #fff;
				}

				.edti-head {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, 0.3);
					top: 100rpx;
					right: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.head-2 {
				flex: 1;
				margin-left: 30rpx;
				margin-top: 100rpx;
				line-height: 1;
			}

			/deep/ .u-icon,
			.u-icon {
				margin-top: 106rpx;
			}
		}

		.pointBox {
			width: 94%;
			margin: 0 3%;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 24rpx 0 rgba($color: #000, $alpha: .2);
		}

		.point {
			text-align: center;
			height: 160rpx;

			font-size: $font-sm;
			// #ifdef MP-WEIXIN
			padding: 24rpx;

			// #endif
			.u-col {
				view {
					color: $u-main-color;
					font-size: 28rpx;
				}

				view:last-child {
					margin-top: 8rpx;
					color: $main-color;
					font-size: $font-lg;
				}
			}
		}

		.order {
			height: 140rpx;
			text-align: center;
			font-size: $font-sm;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 0 3%;
			color: #999;

			.order-item {
				position: relative;
				line-height: 2em;
				width: 96rpx;

				:first-child {
					font-size: 48rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.box {
		transform: translateY(-30rpx);
	}

	.user-name {
		font-size: 34rpx;
		color: #000;
	}

	.bag {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		margin: 0 auto;
	}

	.bag1 {
		background: #ff4a48;
	}

	.bag2 {
		background: #ff992f;
	}

	.bag3 {
		background: #009ee0;
	}

	.bag4 {
		background: #00d5d5;
	}

	.bag5 {
		background: #28ccb0;
	}

	.golf-name {
		font-size: 28rpx;
		color: #ccc;
		padding: 20rpx 0;
		margin-left: 0;
		font-weight: 500;

	}

	.inner {
		box-sizing: border-box;
		width: 100%;
		padding: 0 0rpx;
		margin: 0 auto;
		color: #4a4a4a;
		// background-color: #fff;
	}

	.contact_box {
		margin-top: 50rpx;

		.tit {
			height: 44rpx;
			line-height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #302E3E;
		}

		.item {
			display: flex;
			justify-content: space-between;
			width: 690rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			font-size: 24rpx;

			.itm_l {
				display: flex;
				justify-content: flex-start;

				.line {
					width: 12rpx;
					height: 34rpx;
					background: #A098FA;
					border-radius: 6rpx;
					margin: 14rpx 10rpx 33rpx 0rpx;
				}

				.course {
					font-size: 28rpx;
					font-weight: 400;
					color: #302E3E;
				}
			}

			.itm_r {
				display: flex;
				justify-content: flex-end;
				padding-right: 30rpx;

				.phone {
					font-size: 28rpx;
					font-weight: 400;
					color: #8F8F99;
					margin-right: 12rpx;
				}
			}

		}

		.ite_area {
			width: 690rpx;
			height: 396rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding-top: 36rpx;
			box-sizing: border-box;
			margin: 20rpx 0 40rpx 0;

			.textarea {
				width: 630rpx;
				height: 230rpx;
				background: #FAFAFA;
				border: 2rpx solid #E6E6E6;
				opacity: 1;
				border-radius: 8rpx;
				box-sizing: border-box;
				margin: 0 auto;
				padding: 10rpx 30rpx;
				line-height: 60rpx;
				font-size: 32rpx;
			}

			.btn {
				width: 180rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: #786CD6;
				border-radius: 36rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin: 30rpx 30rpx 0 0;
				float: right;
			}
		}
	}
</style>
